<template>
  <div class="bg-gray-100 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-4">👶 子组件</h2>
    <div class="space-y-3">
      <p class="text-gray-600">
        通过 inject 接收到的用户名：
        <span class="font-semibold text-blue-600 transition-all duration-300" :class="{ 'animate-pulse': isUpdating }">
          {{ username || '未接收到数据' }}
        </span>
      </p>
      <div class="text-sm text-gray-500 bg-white p-3 rounded border-l-4 border-green-400">
        <strong>说明：</strong> 子组件使用 inject('username') 接收父组件提供的响应式引用。
        当父组件异步修改 ref 的值时，子组件会自动更新显示，这是 Vue 3 响应式系统的正确用法。
      </div>
      <div v-if="updateCount > 0" class="text-xs text-green-600 bg-green-50 p-2 rounded">
        ✨ 数据已更新 {{ updateCount }} 次
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref, watch, type Ref } from 'vue'

// 从父组件注入响应式用户名
const username = inject<Ref<string>>('username')
const updateCount = ref(0)
const isUpdating = ref(false)

// 监听用户名变化
if (username) {
  watch(username, (newValue, oldValue) => {
    if (oldValue !== undefined) {
      updateCount.value++
      isUpdating.value = true
      console.log('子组件检测到用户名更新:', newValue)
      
      // 添加更新动画效果
      setTimeout(() => {
        isUpdating.value = false
      }, 500)
    }
  })
}

console.log('子组件接收到的响应式 username:', username)
</script>

<style scoped>
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 0.5s ease-in-out;
}
</style>